<template>
  <div class="toast-test">
    <van-cell-group title="基础展示" inset>
      <van-form>
        <van-field
          v-model="phone"
          label="电话号码校验"
          placeholder="请输入电话号码"
          :rules="[
            {
              required: true,
              message: '手机号码格式错误',
              validator: validatorPhone,
            },
          ]"
        />
        <van-field
          v-model="id"
          label="身份证号校验"
          placeholder="请输入身份证号"
          :rules="[
            {
              required: true,
              message: '身份证号码格式错误',
              validator: validatorIdCard,
            },
          ]"
        />
      </van-form>
    </van-cell-group>
  </div>
</template>

<script>
import { Validator } from "../utils/Validator";
export default {
  name: "Validatir-test",
  data() {
    return {
      phone: "134111",
      id: "440202",
    };
  },
  methods: {
    validatorPhone(value) {
      let assert = Validator("phone").assert(value);
      return assert;
    },
    validatorIdCard(value) {
      let assert = Validator("idCard").assert(value);
      return assert;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>